<template>
  <div class="app-container">
    <el-form  v-show="showSearch" ref="searchForm" :inline="true" :model="formRepairs">

      <el-form-item  size="small"  label="小区">
        <el-select @change="loadZyRepairs" v-model="formRepairs.communityId" placeholder="请选择">
          <el-option
            v-for="item in community"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item >

      <el-form-item  size="small"  label="业主姓名" prop="ownerRealName">
        <el-input v-model="formRepairs.ownerRealName" placeholder="请输入业主姓名" />
      </el-form-item>

      <el-form-item  size="small"  label="业主电话" prop="ownerPhoneNumber">
        <el-input v-model="formRepairs.ownerPhoneNumber" placeholder="请输入业主电话" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary"  size="mini"  icon="el-icon-search" @click="loadZyRepairs(current, pageSize, zyRepair, zyOwner)">
          查询
        </el-button>
        <el-button icon="el-icon-refresh"  size="mini" @click="resetForm('searchForm')">重置</el-button>

      </el-form-item>

    </el-form>


    <el-row :gutter="10" class="mb8">
<!--      <el-col :span="1.5">-->
<!--        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>-->
<!--      </el-col>-->
      <!--隐藏搜索+刷新-->
      <right-toolbar
        :show-search.sync="showSearch"
        @queryTable="loadZyRepairs"
      />
    </el-row>

    <el-table
      ref="multipleTable"
      :data="repairs"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />

      <el-table-column
        label="序号"
        width="60"
        type="index"
        :index="indexMethod"
        align="center"
      />

      <el-table-column
        label="报修编号"
        width="160"
      >
        <template slot-scope="scope">{{ scope.row.repairNum }}</template>
      </el-table-column>

      <el-table-column
        label="保修状态"
        width="120"
        prop="repairState"
        :formatter="repairStatusFormat"
      />

      <el-table-column

        label="业主姓名"
        width="100"
      >
        <template slot-scope="scope">{{ scope.row.zyOwner.ownerRealName }}</template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="业主电话"
        width="120"
        show-overflow-tooltip
      >
        <template slot-scope="scope">{{ scope.row.zyOwner.ownerPhoneNumber }}</template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="报修内容"
        width="120"
      >
        <template slot-scope="scope">{{ scope.row.repairContent }}</template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="详情地址"
        width="100"
      >
        <template slot-scope="scope">{{ scope.row.address }}</template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
      >
        <template slot-scope="scope">{{ scope.row.createTime }}</template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="期待上门时间"
        door-time
      >
        <template slot-scope="scope">{{ scope.row.doorTime }}</template>
      </el-table-column>

      <el-table-column
        prop="address"
        label="处理人姓名"
      >

        <template slot-scope="scope">{{ scope.row.completeName }}</template>

      </el-table-column>

      <el-table-column
        prop="address"
        label="备注"
        show-overflow-tooltip
      >

        <template slot-scope="scope">{{ scope.row.remark }}</template>
      </el-table-column>

      <el-table-column label="查看详情">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
          >查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--        查看详细对话框-->
    <el-dialog
      title="报修详细信息"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >

      <el-form :inline="true" :model="repair"  :label-position="labelPosition" class="demo-form-inline">

        <el-col :span="12">
          <el-form-item label="报修编号">
            <el-input v-model="repair.repairNum" :disabled="true" placeholder="报修编号" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="业主姓名">
            <el-input v-model="repair.zyOwner.ownerRealName" :disabled="true" placeholder="业主姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间">
            <el-input v-model="repair.createTime" :disabled="true" placeholder="创建时间" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="派单时间">
            <el-input v-model="repair.assignmentTime" :disabled="true" placeholder="派单时间" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="接单时间">
            <el-input v-model="repair.receivingOrdersTime" :disabled="true" placeholder="接单时间" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="处理完成时间">
                        <el-input v-model="repair.completeTime"  :disabled="true"  ></el-input>
<!--            <el-date-picker-->
<!--              v-model="repair.completeTime"-->
<!--              clearable-->
<!--              size="small"-->
<!--              style="width: 200px"-->
<!--              type="datetime"-->
<!--              value-format="yyyy-MM-dd HH:mm:ss"-->
<!--            />-->
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="取消时间">
            <el-input v-model="repair.cancelTime"  :disabled="true"  placeholder="取消时间" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="期待完成时间">
            <el-input v-model="repair.doorTime" :disabled="true" placeholder="期待完成时间" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="小区id">
            <el-input v-model="repair.communityId" :disabled="true" placeholder="小区id" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报修内容">
            <el-input v-model="repair.repairContent" :disabled="true" placeholder="报修内容" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="详细地址">
            <el-input v-model="repair.address" :disabled="true" placeholder="详细地址" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="分派人id">
            <el-input v-model="repair.assignmentId" placeholder="分派人id" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="处理人姓名">
            <el-input v-model="repair.completeName" placeholder="处理人姓名" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="处理人电话">
            <el-input v-model="repair.completePhone" placeholder="处理人电话" />
          </el-form-item>
        </el-col>


        <el-col :span="12" >
          <el-form-item label="备注">
            <el-input v-model="repair.remark" placeholder="备注" />
          </el-form-item>
        </el-col>


        <el-col :span="12">
          <el-form-item label="保修状态" prop="repairState">
            <!--            <el-input v-model="repair.repairState" placeholder="保修状态"></el-input>-->
            <template>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in Coptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </template>
          </el-form-item>

        </el-col>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveForm()">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>

      </span>
    </el-dialog>

    <div class="block" style="text-align:center">
      <el-pagination
        :current-page="this.current"
        :page-sizes="[ 3, 6, 9,12]"
        :page-size="this.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

  </div>
</template>

<script>
export default {
  name: 'Repair',
  data() {
    return {
      labelPosition:'left',
      showSearch: true,
      Coptions: [{
        value: 'Pending',
        label: '待处理'
      }, {
        value: 'Allocated',
        label: '已分派'
      }, {
        value: 'Processing',
        label: '处理中'
      }, {
        value: 'Processed',
        label: '已处理'
      }, {
        value: 'No_Processed',
        label: '不处理'
      }, {
        value: 'Cancelled',
        label: '已取消'
      }],

      zyRepair: [],
      zyOwner: [],
      total: 0, // 共多少条
      current: 0, // 当前页数
      pageSize: 3, // 分页大小

      repair: {
        repairId: -1,
        repairNum: '',
        repairState: '',
        assignmentTime: '',
        receivingOrdersTime: '',
        completeTime: '',
        cancelTime: '',
        doorTime: '',
        assignmentId: -1,
        completeId: '',
        completePhone: '',
        completeName: '',
        remark: '',
        createBy: '',
        createTime: '',
        updateBy: '',
        updateTime: '',
        userId: '',
        delFlag: '',
        repairContent: '',
        communityId: -1,
        address: '',
        zyOwner: {}

      },
      dialogVisible: false,

      repairs: [], // 表格数据
      multipleSelection: [],
      formRepairs: {
        communityId: '',
        ownerRealName: '',
        ownerPhoneNumber: ''
      },
      value: '',
      community: []
    }
  },
  created() {
    this.loadZyRepairs(this.current, this.pageSize);
    this.communityAll()
  },
  methods: {
    //添加按钮
    handleAdd() { //打开对话框
      this.dialogVisible = true;
      this.flag = false;
      this.title = '新增';
      this.reset();          //重置 对话框
    },
    // 查看详情
    handleEdit(index, row) {
      this.value = row.repairState;
      this.dialogVisible = true;
      this.repair = JSON.parse(JSON.stringify(row))
      this.title='修改';
      console.log(this.repair)
    },
    // 保存修改
    saveForm() {
      if (this.title==='新增'){

      }else if (this.title==='修改'){
        this.repair.repairState = this.value;

        this.axios({
          url: '/zyRepair/update',
          method: 'put',
          data: this.repair
        }).then(res => {
          if (res.data.data === 'ok') {
            this.$message.success('修改成功')
          } else {
            this.$message.error('修改失败')
          }
        });
      }

      this.dialogVisible = false;
      this.loadZyRepairs(this.current, this.pageSize, this.zyRepair, this.zyOwner)
    },

    // 类型翻译
    repairStatusFormat(row) {
      if (row.repairState === 'Pending') {
        return '待处理'
      } else if (row.repairState === 'Allocated') {
        return '已分派'
      } else if (row.repairState === 'Processing') {
        return '处理中'
      } else if (row.repairState === 'Processed') {
        return '已处理'
      } else if (row.repairState === 'No_Processed') {
        return '不处理'
      } else if (row.repairState === 'Cancelled') {
        return '已取消'
      }
    },

    // 全选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 完整版 点击切换页数
    handleSizeChange(size) {
      console.log(`每页 ${size} 条`);
      this.pageSize = size;
      this.onSubmit(this.current, this.pageSize)
    },
    // 点击    翻页
    handleCurrentChange(current) {
      console.log(`当前页: ${current}`);
      this.current = current;
      this.onSubmit(this.current, this.pageSize)
    },

    indexMethod(index) { // 序号
      index = (index + 1) + (this.current - 1) * this.pageSize;
      return index
    },

    // 查询小区
    communityAll() {
      this.axios({
        url: 'http://localhost:8080/zyCommunity/listAll'
      }).then(res => {
        const list = res.data.data.map((item, index) => ({
          value: item.communityId,
          label: item.communityName
        }));
        this.community = list
      })
    },

    loadZyRepairs(current, pageSize, zyRepair, zyOwner) {
      current = this.current;
      pageSize = this.pageSize;
      zyRepair = this.formRepairs;
      // 小区id  业主姓名和电话 用一个对象装起来，后端可以分别接收

      // 首先分页查询
      this.axios({
        url: 'http://localhost:8080/zyRepair?' + this.qs.stringify(zyRepair),
        params: {
          current: current,
          size: pageSize
        }
      })
        .then(res => {
          console.log(res);
          if (res.data.status === 'OK') {
            this.repairs = res.data.data.records;
            this.current = res.data.data.current;
            this.total = res.data.data.total;
            this.pageSize = res.data.data.size
          }
        })
    },

    // 重置表单数据
    resetForm(searchForm) {
      this.$refs[searchForm].resetFields();// 重置表单数据 <el-form-item  必须加 prop
      this.formRepairs.communityId = ''
    },



    handleClose(done) { // 意外关闭
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    }
  }
}
</script>

<style scoped>

</style>
